<template>
  <div v-show="show" id="ptoSetting" class="pto-setting">
    <div class="tip-title">This add-on enables the entry and tracking of PTO.</div>
    <div class="add-btn-warp">
      <button  class="default-btn active add-btn" @click="showAddPtoType = true" v-touch-ripple :class="{marginBottom0:showAddPtoType}">+ Add</button>
      <Row class="add-pto-content" v-if="showAddPtoType">
        <i-col span="18">
          New PTO Code Name <Input v-model="addPtoTypeName" style="width: 134px;margin-left: 24px"></Input>
        </i-col>
        <i-col span="6"><Button class="default-btn"  v-touch-ripple @click="showAddPtoType = false">Cancel</Button><Button class="default-btn active"  v-touch-ripple @click="savePtoType">Save</Button></i-col>
      </Row>
    </div>
    <div class="table-content">
      <i-table class="table-panel" :columns="ptoColumns" :data="ptoTypeList"></i-table>
    </div>

    <Modal
      v-model="editPtoRule"
      title="PTO Rule"
      ok-text = 'Save'
      cancel-text = 'Cancel'
      @on-ok="savePtoRule"
      @on-cancel="cancelSavePtoRule"
      :width = '613'
      class-name = 'my-modal edit-pto-rule-modal'>
      <Form class="my-form edit-pto-rule-form" :model="editPtoRuleForm"  :label-width="140" label-position="left">
       <Form-item label="Accrual rules">
          <Select v-model="editPtoRuleForm.accrualType">
            <Option value="1">Yearly</Option>
          </Select>
        </Form-item>
        <Form-item label="Accrue">
          <Input-number v-model="editPtoRuleForm.yearAccrualAmount" style="width: 82px"></Input-number><span style="padding-left: 12px">hours per year</span>
        </Form-item>
        <Form-item :label-width="1">
         <!-- <el-checkbox :true-label=1 :false-label=0>Use it or lose it </el-checkbox>-->
        </Form-item>
        <div class="accrual-date-settings">
          <div class="title">Accrual Date Settings</div>
          <div class="content">
            <div class="title">Accruals will happen on</div>

            <Radio-group vertical v-model="yearHappenRadio">
              <Radio label="1">Hire Date</Radio>
              <Radio class="l" label="2">.</Radio><DatePicker v-model="editPtoRuleForm.yearHappen" class="l" style="width: 134px"></DatePicker>
            </Radio-group>

          <Form-item :label-width="1">
              <el-checkbox :true-label=1 :false-label=0 style="width: 210px">Don't begin accruals until</el-checkbox>
              <Date-picker style="width: 110px;display: inline-block" v-model="editPtoRuleForm.yearBeginDate"></Date-picker>
            </Form-item>
            <Form-item :label-width="1">
              <el-checkbox :true-label=1 :false-label=0 style="width: 60px">Grant</el-checkbox>
              <Input-number v-model="editPtoRuleForm.grantAccrualAmount" style="width: 82px"></Input-number>
              <span style="color: #96ACB9;">hours of time on</span>
              <Date-picker style="width: 110px;display: inline-block" v-model="editPtoRuleForm.grantAccrualDate" ></Date-picker>
            </Form-item>
            <Form-item :label-width="1">
              <el-checkbox v-model="editPtoRuleForm.isOutsideCurrentyear" :true-label=1 :false-label=0>Allow entries outside of an employee's current accrual year</el-checkbox>
            </Form-item>
            <div class="title">Balance Settings</div>
            <div style="line-height: 40px;color: #96ACB9;">Max Balance Limit</div>
            <Form-item :label-width="1">
              <Input-number style="width: 82px" v-model="editPtoRuleForm.maxBalance"></Input-number><span style="margin-left: 23px;color: #96ACB9;">enter '0' for no limit </span>
            </Form-item>
            <Form-item :label-width="1">
              <el-checkbox v-model="editPtoRuleForm.isNegativeBalance" :true-label=1 :false-label=0>Allow a Negative Balance </el-checkbox>
            </Form-item>
          </div>
        </div>
      </Form>
    </Modal>
    <employee-select @done="donePtoRelation" @close="showEmployeeList = false" :selection="employeeListSelection" :show="showEmployeeList" :list="employeeList"></employee-select>
  </div>
</template>

<script>
  import addEmployeeIcon from 'src/assets/images/addEmployee.png'
  import employeeSelect from 'src/pages/org/employee/employeeListSelect.vue'
  export default {
    name: 'ptoSetting',
    components: {
      employeeSelect
    },
    props:{
      show:{
        type:Boolean,
        default:false
      }
    },
    data () {
      var t = this;
      return {
        addEmployeeIcon,
        showEmployeeList:false,
        employeeListSelection:[],
        employeeList:[],
        employeePtoId:null,
        ptoColumns:[
          {
            key:'ptoName',
            title:"Name"
          },
          {
            key:'isTrackAccural',
            title:"Accruals",
            className:'edit-column',
            render:function(row,column,index){
              t.$set( t.ptoAccruals,'accrual'+row.id,parseInt(row.isTrackAccural));
              return `<el-checkbox v-model="ptoAccruals['accrual'+${row.id}]"  @change="changePtoAccrual(${row.id})"  :true-label="1" :false-label="0">Track  Accruals</el-checkbox> <i v-if="ptoAccruals['accrual'+${row.id}] == 1" class="iconfont edit-icon" style="margin-left: 12px" @click="editPtoType(${row.id})">&#xe665;</i>`;
            }
          },
          {
            key:'isAllEmployee',
            title:"Assign",
            className:'assign-column',
            render:function(row,column,index){
              t.$set( t.ptoAssign,row.id,parseInt(row.isAllEmployee));
              return `<el-checkbox v-model="ptoAssign[${row.id}]" @change="changePtoAssign(${row.id})"   :true-label="0" :false-label="2">Assign to all </el-checkbox>
                      <img @click="getPtoEmployee(${row.id})" class="add-img" v-if="ptoAssign[${row.id}] !=0" :src="addEmployeeIcon">`
            }
          },
          {
            title:" ",
            render:function (row,column,index) {
              return '';
            }
          },
          {
            title:' ',
            width:100,
            className:'edit-column',
            render:function (row, column, index) {
              return  ` <i v-if="${row.corpId}" class="iconfont delete-icon" @click="deletePtoType(${row.id})">&#xe668;</i>`;
            }
          }
        ],
        ptoAssign:{},
        ptoAccruals:{},
        addPtoTypeName:null,
        editPtoRule:false,
        showAddPtoType:false,//add btn content
        yearHappenRadio:1,
        yearHappenDate:new Date(),
        editPtoRuleForm:{
          employeeIds:0,
          accrualType:1,
          yearAccrualAmount:null,
          grantAccrualAmount:null,
          isOutsideCurrentyear:0,
          isNegativeBalance:0,
          maxBalance:0,
          yearBeginDate:null,
          grantAccrualDate:null,
          yearHappen:null,
        },
      }
    },
    computed:{
      ptoTypeList(){
        return this.$store.getters.ptoTypeList;
      },
    },
    watch:{
      show(value){
        if(value){
            this.init();
        }
      },
      yearHappenRadio(value){
        if(value == 1){
          this.editPtoRuleForm.yearHappen = null;
        }
      }
    },
    methods:{
      init(){
        this.getPtoTypeList();
      },
      getPtoTypeList(){
        this.$store.dispatch('getPtoTypeList');
      },
      savePtoType(){
        this.$store.dispatch('savePtoType',{ptoName:this.addPtoTypeName,id:null,"isAllEmployee":0,
          "isTrackAccural":0
        }).then(
          ()=>{
            this.showAddPtoType = false;
            this.$Message.success('add pto type success!');
            this.getPtoTypeList();
          }
        );
      },
      editPtoType(id){
        this.editPtoRule = true;
      },
      deletePtoType(id){
        this.$Modal.confirm({
          title: 'Delete',
          content: '<p>Delete this type?</p>',
          loading: true,
          onOk: () => {
            this.$store.dispatch('deletePtoType',{ptoTypeId:id}).then(
              () =>{
                this.$Modal.remove();
                this.$Message.info('delete success!');
                this.getPtoTypeList();
              }
            )
          }
        });
      },
      changePtoAccrual(id){
        var isTrackAccural = this.ptoAccruals['accrual'+id];
        this.ptoAccruals['accrual'+id] =  this.ptoAccruals['accrual'+id] == 0?1:0;
        this.$store.dispatch('setPtoTypeTrackAccrual',{
          ptoTypeId:id,
          isTrackAccural:isTrackAccural
        }).then(
          ()=>{
            this.$Message.success('change success');
            this.ptoAccruals['accrual'+id] = this.ptoAccruals['accrual'+id]==0?1:0;
          }
        )
      },
      changePtoAssign(id){
        var ptoAssign = this.ptoAssign[id];
        this.ptoAssign[id] = this.ptoAssign[id]==0?2:0;
        this.$store.dispatch('authorizePto',{
          employeeIds:null,
          ptoTypeId:id,
          isAllEmployee:ptoAssign
        }).then(
          ()=>{
            this.$Message.success('change success');
            this.ptoAssign[id] = this.ptoAssign[id]==0?2:0;
          }
        )
      },
      /**
       *
       * @param id
       */
      getPtoEmployee(id){
        this.$store.dispatch('getPtoTypeEmployeesList',{ptoTypeId:id}).then(
          (data)=>{
            this.employeeList = data.data;
            this.showEmployeeList =true;
            this.employeePtoId = id;
          }
        )
      },
      donePtoRelation(employeeIds){
        if(employeeIds.length){
          this.$store.dispatch('authorizePto',{
            employeeIds:employeeIds.join(),
            ptoTypeId:this.employeePtoId,
            isAllEmployee:1
          }).then(
            ()=>{
               this.$Message.success('success');
            }
          )
        }
      },
      savePtoRule(){
        var paramData = JSON.parse(JSON.stringify(this.editPtoRuleForm));
        if(paramData.yearBeginDate){
          paramData.yearBeginDate = moment(paramData.yearBeginDate).format('YYYY-MM-DD');
        }
        if(paramData.grantAccrualDate){
          paramData.grantAccrualDate = moment(paramData.grantAccrualDate).format('YYYY-MM-DD');
        }
        if(paramData.yearHappen){
          paramData.yearHappen = moment(paramData.yearHappen).format('YYYY-MM-DD');
        }
        this.$store.dispatch('addPtoRule',paramData).then(
          ()=>{
            this.$Message.success('add success');
          }
        );
      },
      cancelSavePtoRule(){

      }
    }
  }
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
    @import "src/assets/css/variable.scss";

    #ptoSetting {
      .add-pto-content{
        background: #FFFFF0;
        height: 80px;
        line-height: 80px;
        padding: 0 30px 0 38px;
        font-size: 14px;
        color: #335570;
        button{
          margin-left: 30px;
        }
      }
      .table-panel{
        .edit-column {
          .iconfont{
            font-size: 18px;
            color: $baseColor;
            margin-right:12px ;
            vertical-align: middle;
            &:hover{
              opacity: .7;
            }
          }
        }
        .assign-column{
          .add-img{
            vertical-align: middle;
            cursor: pointer;
            &:hover{
              opacity: .7;
            }
          }
        }
      }

      .edit-pto-rule-modal{
        .edit-pto-rule-form{
          font-size: 14px;
          .ivu-form-item{
            margin-bottom: 12px;
          }
          .accrual-date-settings{
            >.title{
              font-weight: bold;
              margin-bottom: 12px;
            }
            >.content{
              padding-left: 20px ;
              >.title{
                line-height: 40px;
              }
              .ivu-el-checkbox-wrapper{
                font-size: 14px;
                color: #96ACB9;
              }
              .ivu-form-item{
                margin-bottom: 6px;
              }
            }
          }

        }
      }
    }
</style>
